<template>
	<view>
		<view class="white-bj wid-100 border-t-1-96 d-flex">
			<!-- 左侧导航 -->
			<scroll-view scroll-y="true" class="black97-bj nav-box" :style="{height:swiperHeight+'px'}">
				<view class="item text-center position-relative" v-for="(item,index) in cateList" :key="index" :class="{'white-bj':item.is==true}" @tap="selectionRes(item.id)">
					<view class="tag border-r position-absolute p-left" :class="{'main-bj-jb':item.is==true}"></view>
					<view class="font-24 black20-zt line-h100" :class="{'font-w-b':item.is==true}">{{item.name}}</view>
				</view>
			</scroll-view>
			<!-- 栏目内容 -->
			<scroll-view scroll-y="true" class="white-bj content-box pad-t-20" :style="{height:swiperHeight+'px'}">
				<!-- banner -->
				<view class="banner border-r-15 overflow-hidden" v-if="banner!=''"><image :src="banner" mode="widthFix" lazy-load></image></view>
				<view class="cate-box pad-t-30" v-for="(item,index) in prolist" :key="index" v-if="item.shop_list.length>0">
					<view class="title font-24 black40-zt  text-center">———— {{item.cate_name}} ————</view>
					<view class="item-box wid-100 a-center flex-wrap mar-top30">
						<view class="cate-item" v-for="(item1,index1) in item.shop_list" :key="index1" @tap="open('shop',item1.id,item.type)">
							<view><image :src="item1.pic" mode="widthFix" lazy-load></image></view>
							<view class="black20-zt font-w-b font-24 line-h35 text-overflow-2 mar-top10 cate_title">{{item1.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 自动定义导航 -->
		<m-tabbar-item :tabIndex="tabIndex"></m-tabbar-item>
	</view>
</template>

<script>
	import mTabbarItem from "@/components/m-tabbar-item.vue"
	export default {
		components:{
			mTabbarItem
		},
		data() {
			return {
				tabIndex:1,
				swiperHeight:500,
				cateList:[],
				banner:'',
				prolist:[]
			}
		},
		onLoad() {
			uni.hideTabBar();
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShow() {
			this.getCate()
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			//打开
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//获取二级分类与商品列表
			async getCateProList(pid){
				const one={
					pid:pid,
					aid:1
				}
				await this.$api.GetShopCateList(one).then(res=>{
					console.log(res)
					this.prolist=res.data
				})
			},
			//选择分类
			selectionRes(e){
				this.cateList.forEach(item=>{
					if(item.id==e){
						item.is=true
						this.banner=item.banner
						this.getCateProList(item.id)
					}else{
						item.is=false
					}
				})
			},
			//获取全部栏目
			async getCate(){
				const one={
					aid:1,
					pid:0
				}
				await this.$api.GetCateList(one).then(res=>{
					if(res.code==0){
						// 给数组对象使用map循环添加新属性
					  let lists = res.data.map((item, index) => {
						  if(index==0){
							this.banner=item.banner
							this.getCateProList(item.id)
							return Object.assign(item, { is: true })
						  }else{
							return Object.assign(item, { is: false })
						  }
					  })
					  this.cateList=lists
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width: 100%;
		display: block;
	}
	.nav-box{
		width: 180rpx;
		.tag{
			width: 8rpx;
			height: 45rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.content-box{
		width: 570rpx;
		.banner{
			width: 520rpx;
			margin: 0 auto;
		}
		.cate-box{
			width: 520rpx;
			margin: 0 auto;
			.item-box{
				.cate-item{
					width: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					.cate_title{
						height: 68rpx;
					}
					&:nth-child(3n){
						margin-right: 0rpx;
					}
				}
			}
		}
	}
</style>
